<template>
  <div
    class="setTime_component"
    :class="{ type_taskGroup: type == 'taskGroup' }"
    @click.stop.prevent
  >
    <el-tooltip
      content="任务组的时间设置不作为限时，仅便任务同步设置，并不记录任务组设置过的时间。"
      placement="bottom"
      effect="light"
    >
      <i
        class="el-icon-warning"
        style="color: #f6ad35"
        v-if="type === 'taskGroup'"
      ></i>
    </el-tooltip>
    开始时间：
    <DateTimePicker
      @handleChangeTime="handleChangeTime"
      :timeType="'start'"
      :type="type"
      :beginTime="beginTime"
      :startTime="startTime"
      :endTime="endTime"
      :currTaskSetTimeObj="currTaskSetTimeObj"
      placeholder="开始时间"
    />
    结束时间：
    <DateTimePicker
      @handleChangeTime="handleChangeTime"
      :timeType="'end'"
      :type="type"
      :cutOffTime="cutOffTime"
      :startTime="startTime"
      :endTime="endTime"
      :currTaskSetTimeObj="currTaskSetTimeObj"
      placeholder="结束时间"
    />
    <button
      class="confirmBtn"
      :class="{
        disabledClick: timeIsAllNull,
        takeEffected: currTaskSetTimeObj && currTaskSetTimeObj.state == '生效',
      }"
      @click="handleConfirm"
    >
      {{
        type == "taskGroup"
          ? "一键生效"
          : !currTaskSetTimeObj ||
            !currTaskSetTimeObj.state ||
            currTaskSetTimeObj.state == "关闭"
          ? "生效"
          : "关闭"
      }}
    </button>
  </div>
</template>

<script>
import DateTimePicker from "@/views/courses/detail/task_N/compoment/DateTimePicker";
export default {
  components: {
    DateTimePicker,
  },
  data() {
    return {
      startTime: null,
      endTime: null,
    };
  },
  props: {
    taskGroupID: Number,
    taskID: Number,
    type: String,
    beginTime: Date,
    cutOffTime: Date,
    taskSettings: Object,
  },
  computed: {
    currTaskSetTimeObj() {
      return this.taskSettings?.[this.taskID];
    },
    timeIsAllNull() {
      return !this.startTime && !this.endTime;
    },
    type_width() {
      return this.type == "taskGroup" ? "width:648px" : "width:632px";
    },
  },
  methods: {
    handleChangeTime(value, type) {
      if (type === "start") {
        this.startTime = value;
      } else {
        this.endTime = value;
      }
      // if (this.startTime && this.endTime) {
      this.$emit("handleChangeTime", {
        type: this.type,
        taskGroupID: this.taskGroupID,
        taskID: this.taskID,
        value: value,
        timeType: type,
      });
      // }
    },
    handleConfirm() {
      if(!this.startTime && !this.endTime) return this.$antdMessage.warning({content: '请至少选择一个时间!'})
      this.$emit("handleConfirm", {
        type: this.type,
        taskGroupID: this.taskGroupID,
        taskID: this.taskID,
      });
    },
  },
};
</script>

<style lang="stylus">
.setTime_component {
  min-width: 632px;
  margin: 0 15px 0 auto;
  display: flex;
  align-items: center;

  button {
    cursor: pointer;
    outline: none;
    width: 72px;
    height: 29px;
    border-radius: 5px;
    border: none;
    font-family: Yu Gothic UI;
    font-size: 14px;
    color: #fff;
    background: #02497c;
    transition: opacity 0.1s linear;
  }

  button:hover {
    opacity: 0.9;
  }

  .confirmBtn {
    margin-left: 10px;
  }

  .disabledClick {
    cursor: not-allowed;
    background: #ccc;
  }

  .takeEffected {
    background: #F5222D;
  }

  .el-date-editor--datetime {
    width: 195px !important;
    height: 32px;

    .el-input__inner {
      height: 100%;
    }

    .el-input__prefix, .el-input__suffix {
      .el-input__icon {
        line-height: 32px;
      }
    }
  }
}

.type_taskGroup {
  min-width: 648px;
}
</style>